<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      <link
      rel="shortcut icon"
      href="http://www.shopin.net/static/favicon.ico"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/logon.css" />
    <title>上品折扣登录页</title>
  </head>
  <body>
    <div class="bancen">
      <div class="upside">
        <div class="uplef">
          <a href="http://127.0.0.1:5500/dist/index.html">您好!&emsp;欢迎来到上品折扣</a>
          </div>
        <div class="uprig">
          <ul>
            <a
            href="http://127.0.0.1:5500/dist/index.html"
            target="_blank"
          >我的上品&nbsp;&nbsp;|</a>
            <li>新手上路</li>
            <li>客服</li>
            <li>帮助&nbsp;&nbsp;|</li>
            <li>关注我们</li>
          </ul>
        </div>
        <span class="lef"></span>
        <span class="rig"></span>
      </div>
      <div class="on">
        <a href="http://127.0.0.1:5500/dist/index.html" target="_blank"></a>
      </div>
      <div class="outside">
        <p>登录上品折扣网</p>
        <div class="left">
          <form action="javascript:void(0)">
            <div class="blo">
              <span>账号&nbsp;:</span>
              <input type="text" id="username" />
            </div>
            <!-- <div class="non"><i></i>*账户格式不正确</div> -->
            <div class="blo">
              <span>密码&nbsp;:</span>
              <input type="text" id="password" />
            </div>
            <!-- <div class="non"><i></i>*密码格式不正确</div> -->
            <button
              type="submit"
              id="dl" "
              style="
                display: block;
                background-color: #f40;
                color: white;
                font-size: 20px;
                width: 220px;
                height: 35px;
                border: none;
                border-radius: 5px;
                margin: 30px 0 0 102px;
              "
            >
              登录
            </button>
            <button
              type="submit"
              id="zc"
              style="margin-left: 65%;position: relative; top:-30px;"
            >
            <a href="http://127.0.0.1:5500/dist/post.html">
              点击跳转注册</a>
            </button>
          </form>
        </div>
        <div class="right">
          <img src="http://www.shopin.net/static/images/img_code1.gif" alt="" />
        </div>
      </div>
    </div>

    <script src="./javascripts/jQuery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
    <script src="./javascripts/utils.js"></script>
    <script>
      $(function () {
        $("#dl").click(function () {
          let url = "http://localhost/server/login.php";
          xhr("POST", url, {
            username: $("#username").val(),
            password: $("#password").val(),
          }).then(function (res) {
            var data = JSON.parse(res);
            if (data.type === "success") {
              alert("登录成功");
              setTimeout(function () {
                    location.href = "./index.html"; // 跳转到登录页面;
                  }, 1000);
            } else {
              alert("登录失败");
            }
          });
        });
        setTimeout(function () {
          for (var i = 0; i < alerts.length; i++) {
            alerts[i].style.display = "none";
          }
          // 跳转到登录页面;
        }, 1000);
      });
      
      // 懒加载
      $(function () {
        $(".lazy").lazyload();
      });
    </script>
  </body>
</html>
